<template>
  <div class="fire-map-wrapper img-container">
    <div class="map-wrapper" ref="map" style="width: 100%;height: 100%;"></div>
    <div class="img-contaienr__footer"></div>
    <ul class="legend">
      <li>县市机关</li>
      <li>监控</li>
      <li>消防水泵</li>
      <li>消防站</li>
    </ul>
  </div>
</template>

<script>
import Map from 'ol/Map';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
import TileLayer from 'ol/layer/Tile';
export default {
  data () {
    return {
      // 地图
      map: null,
    };
  },
  computed: {},
  watch: {},
  methods: {

  },
  created () {
    this.$nextTick(() => {
      this.map = new Map({
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=f01023d9e7977aa8946e0137daf05a2b",
            }),
            setStyle: "black",
          }),
        ],
        view: new View({
          center: [118.1163, 24.4673],
          zoom: 12,
          projection: 'EPSG:4326',
        }),

        // 使用 Vue 的 ref 来引用 DOM 元素  
        target: this.$refs.map,
      });
    })
  },
  mounted () {

  },
  components: {},
}
</script>

<style lang='less' scoped>
  .fire-map-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    .legend {
      width: 95px;
      position: absolute;
      right: 15px;
      bottom: 15px;
      padding: 5px;
      box-sizing: border-box;
      background: rgba(0,0,0,0.3);
      li {
        text-align: left;
        cursor: pointer;
      } 
    }
  }
</style>